import React from 'react'
import { Form, Button, Input, Checkbox, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import request from '@/utils//request.js'

import './login.scss'

export default function Login(props) {
	const onFinish = (values) => {
		console.log(values);
		request.get(`/users?username=${values.username}&password=${values.password}&roleType=true&_expand=role`).then(res => {
			console.log(res);
			if (res.data?.length) {
				message.success('登录成功')
				localStorage.setItem('token', JSON.stringify(res.data[0]))
				if (props.location.query?.redirect) {
					location.href = props.location.query?.redirect
				} else {
					location.href = '/'
				}
			} else {
				message.error('用户名或者密码错误')
			}


		})
	}

	const particlesInit = async (main) => {
		// console.log(main);
		await loadFull(main);
	};

	const particlesLoaded = (container) => {
		// console.log(container);
	};
	return (
		<div style={{ width: '100%', height: '100%' }}>
			<Particles
				id="tsparticles"
				init={particlesInit}
				loaded={particlesLoaded}
				options={{
					background: {
						color: {
							value: "#0d47a1",
						},
						// image: "url('./logo192.png')"
					},
					fpsLimit: 120,
					interactivity: {
						events: {
							onClick: {
								enable: true,
								mode: "push",
							},
							onHover: {
								enable: true,
								mode: "repulse",
							},
							resize: true,
						},
						modes: {
							push: {
								quantity: 4,
							},
							repulse: {
								distance: 200,
								duration: 0.1,
							},
						},
					},
					particles: {
						// color: {
						// 	value: "#eee",
						// },
						// links: {
						// 	color: "#ffffff",
						// 	distance: 150,
						// 	enable: true,
						// 	opacity: 0.5,
						// 	width: 1,
						// },
						collisions: {
							enable: true,
						},
						move: {
							direction: "none",
							enable: true,
							outModes: {
								// default: "bounce",
							},
							random: false,
							speed: 3,
							straight: false,
						},
						number: {
							density: {
								enable: true,
								area: 800,
							},
							value: 80,
						},
						opacity: {
							value: 0.5,
						},
						shape: {
							type: [
								'image',
								'star'
							],
							options: {
								"star": {
									"sides": 5, // the number of sides of the star
									"inset": 3 // the inset length, 2 is the default and an acceptable value
								},
								"image": {
									// any path or url to your image that will be used as a particle
									"src": "/logo512.png",
									// the pixel width of the image, you can use any value, the image will be scaled
									"width": 100,
									// the pixel height of the image, you can use any value, the image will be scaled
									"height": 100,
									// if true and the image type is SVG, it will replace all the colors with the particle color
									"replaceColor": false
								}
							}
						},
						size: {
							value: { min: 1, max: 5 },
						},
					},
					detectRetina: true,
				}}
			/>
			<div id="components-form-demo-normal-login">
				<div className='loginTitle'>全球新闻发布管理系统</div>
				<Form
					name="normal_login"
					className="login-form"
					onFinish={onFinish}
				>
					<Form.Item
						name="username"
						rules={[{ required: true, message: 'Please input your Username!' }]}
					>
						<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
					</Form.Item>
					<Form.Item
						name="password"
						rules={[{ required: true, message: 'Please input your Password!' }]}
					>
						<Input
							prefix={<LockOutlined className="site-form-item-icon" />}
							type="password"
							placeholder="Password"
						/>
					</Form.Item>
					<Form.Item>
						<Form.Item name="remember" valuePropName="checked" noStyle>
							<Checkbox>记住密码</Checkbox>
						</Form.Item>

						<a className="login-form-forgot" href="">
							忘记密码?
						</a>
					</Form.Item>

					<Form.Item>
						<Button type="primary" htmlType="submit" className="login-form-button">
							登录
						</Button>
						<a href="" style={{ marginTop: '10px', display: 'inline-block' }}>注册</a>
					</Form.Item>
				</Form>
			</div>
		</div>

	)
}
